<template>
          <div class="edit_container" style="width:100%; height:50vh;">
              <quill-editor
                style="height:100%;"
                v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
              >
              </quill-editor>
            </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { typeJson } from "@/components/kits/plugins/config";
import { employeeInfoList } from "@/api/base";
import { safeCultureInsert } from "@/api/namedev";
export default {
    name: "SJquill",
  props: {
      dataPros:{
          type: String,
      default: "",
      }
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      rules: {
        cultureName: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
      },
      list: "",
      dialogVisible: false,
      currentPage: 1,
      pageSize: 100,
      content: this.data,
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: ['12','16','18','20','24','28','32','36'] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            ["image"], //上传图片、上传视频
          ],
        },
      },
    };
  },
  watch: {
    list: function(newVal, oldnew) {
      // if (newVal.includes(",") && typeof newVal != undefined) {
      //   let newValList = newVal.split(",");
      //   let oldnewList = oldnew.split(",");
      //   console.log(newValList);
      //   console.log(oldnewList);
      //   for (let i = 0; i < newValList.length; i++) {
      //     for (let j = 0; j < oldnewList.length; j++) {
      //       if (newValList[i] == oldnewList[j]) {
      //       }
      //     }
      //   }
      // }
      this.$nextTick(() => {
        let quill = this.$refs.myQuillEditor.quill;
        let length = this.$refs.myQuillEditor.quill.selection.savedRange.index;
        // let list = newVal.split(",");
        // for (let i = 0; i < list.length; i++) {
        //   setTimeout(function() {
          setTimeout(() => {
             quill.insertEmbed(length, "image", this.list[0]);
          }, 1000);
        //   }, 1000);
        // }
        quill.setSelection(length + 1);
      });
    },
    content:function(vcal){
        this.$emit("update:dataPros", vcal)
    }
  },
  created() {},
  mounted() {},
  inject: ["reload"],
  methods: {
    handleChange(url) {
      this.list = url
    },
    seed(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await safeCultureInsert(this.ruleForm);
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.reload();
        } else {
          this.$message({
            message: "保存失败",
            type: "warning",
          });
          return false;
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    click() {
      this.dialogVisible = true;
      console.log(this.$store.state.mineId);
      this.$nextTick(() => {
        if (this.$refs.myQuillEditor) {
          this.$refs.myQuillEditor.quill
            .getModule("toolbar")
            .addHandler("image", this.imgHandler);
          //这里初始化，劫持toolbar的image的handler方法，在mounted中处理
        }
      });
    },
    imgHandler(state) {
      if (state) {
        console.log(state);
        this.$refs.fileBtn.uploadClick();
      }
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>